<template>
  <div>
    <div>
      <button @click="arrchange">数组添加元素</button><span>{{title}}</span>
    </div>
    <button @click="objchange">{{user.name}}</button><button @click="objchange">{{name}}</button>
    <br>
    <button @click="lessonchange">{{lesson.name}}</button>
  </div>
</template>

<script>
  // reactive只用于引用数据类型，ref既可以用于基本数据类型，也可以用于引用数据类型
  // toRefs用于将结构的数据实现响应式
  import {reactive,ref,toRefs} from 'vue'
  export default {
    setup() {
      let title = reactive([]);
      const arrchange = () => {
        title.push('数组的第一个元素');
      };

      let user = reactive({name:"后盾人"});
      const objchange = () => {
        user.name = "houdunren";
      };

      let lesson = ref({name:'vue'});
      const lessonchange = () => {
        lesson.value.name = 'js';
      }
      return {title,arrchange,user,objchange,lesson,lessonchange,...toRefs(user)};
    }
  }
</script>

<style lang="scss" scoped>

</style>